<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
    <my-list :count="5"></my-list>
</div>
</body>

<script>
    const App = Vue.createApp({})
    const listCom = {
        props: {
            count: Number
        },
        provide() {
            return {
                listCount: this.count
            }
        },
        template: `
          <div style="border:red solid 10px;">
            <my-item v-for="i in this.count" :list-count="this.count" :index="i"></my-item>
          </div>
        `
    }
    const itemCom = {
        props: {
            index: Number
        },
        template: `
          <div style="border:blue solid 10px;">
            <my-label :list-count="this.listCount" :index="this.index"></my-label>
          </div>
        `
    }
    const labelCom = {
        props: {
            index: Number
        },
        inject: ['listCount'],
        template: `
          <div>{{ index }}/{{ listCount }}</div>
        `
    }
    App.component("my-list", listCom)
    App.component("my-item", itemCom)
    App.component("my-label", labelCom)
    App.mount("#Application")
</script>
</html>
